<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 个人信息</title>
    <script src="../../js/jquery.min.js"></script>
    <link href="../../css/userInfo.css" rel="stylesheet">
    <link href="../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<div id="notification" class="notification">
    <span id="message"></span>
</div>
    <!-- 头部 -->
    <header th:insert="~{common/common::header}">
    </header>
    <!-- 左边 -->
    <aside th:insert="~{common/common::aside}">
    </aside>
    <!-- 中间 -->
    <main class="main">
        <form action="/user/updateUserInfo" id="userForm">
            <h2 style="margin: 20px 30%;">个人信息设置</h2>
            <div class="form-group">
                <label for="fullName">用户姓名</label>
                <input type="text" id="fullName" name="fullName" required th:value="${userInfo.fullName}">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="text" id="password" name="password" required th:value="${userInfo.password}">
            </div>
            <div class="form-group">
                <label for="telephone">手机号</label>
                <input type="text" id="telephone" name="telephone" required th:value="${userInfo.telephone}">
            </div>
            <input type="button" value="保存提交" onclick="updateUserInfo()">
        </form>

    </main>
</body>

<script th:inline="javascript" type="text/javascript">
    function validatePhoneNumber(phoneNumber) {
        // 中国的电话号码正则表达式
        const phoneRegex = /^1[3-9]\d{9}$/;

        if (phoneRegex.test(phoneNumber)) {
            return true;
        } else {
            return false;
        }
    }

    function updateUserInfo(){
        var password = document.getElementById("password").value;
        var telephone = document.getElementById("telephone").value;
        if(password.length > 50){
            document.getElementById("message").innerHTML = "密码过长，请重新输入";
            this.showNotification();
            return false;
        }
        if(!validatePhoneNumber(telephone)){
            document.getElementById("message").innerHTML = "电话号码格式不正确，请重新输入";
            this.showNotification();
            return false;
        }
        document.getElementById("userForm").submit();
    }

    function showNotification() {
        const notification = document.getElementById("notification");
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }
    function outLogin(){
        location.href = '/outLogin'
    }
</script>

</html>